<template>
	<view class="main-container">
		<!-- 顶部横幅 -->
		<view class="banner">中华疗愈行业协会在线学习考试平台</view>
		<!-- 四个圆形按钮 -->
		<view class="icon-row">
			<view class="icon-btn" v-for="item in icons" :key="item.text" @click="onIconClick(item)">
				<image :src="item.icon" class="icon-img" />
				<text class="icon-text">{{ item.text }}</text>
			</view>
		</view>
		<!-- 最新课程 -->
		<view class="section-title">最新课程</view>
		<view class="course-list">
			<view class="course-card" v-for="course in courses" :key="course.title" @click="handleCourseClick(course)">
				<image :src="(course.fengmianlujing)" class="course-img" />
				<view class="course-info">
					<text class="course-title">{{ course.kechengmingcheng }}</text>
					<text class="course-desc">{{ course.kechengxiangqing }}</text>
				</view>
			</view>
		</view>
		<!-- 保留原有 IndexPart5 -->
		<IndexPart5 class="mt8" />
		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-item" v-for="tab in tabbar" :key="tab.text" @click="onTabClick(tab)">
				<image :src="tab.icon" class="tabbar-icon" />
				<text :class="['tabbar-text', { active: currentTab === tab.key }]">{{ tab.text }}</text>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 预约类别 -->
		<!-- <uni-popup ref="bookingtypeDialog" type="dialog">
			<BookingCarType @close="closeBookingtypeDialog"></BookingCarType>
		</uni-popup> -->
		<!-- 视频播放弹窗 -->
		<uni-popup ref="videoPopup" type="center">
			<view class="video-popup">
				<view class="video-popup-header">
					<text class="video-title">{{currentCourse.kechengmingcheng}}</text>
					<text class="close-btn" @click="closeVideoPopup">×</text>
				</view>
				<video-player v-if="showVideo" :videoUrl="videoUrl"></video-player>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import IndexPart5 from "./components/index-part/index-part5.vue"
	import BookingCarType from "@/pages/booking/components/booking-car/booking-car-type.vue"
	import request from '@/common/request.js';
	import indexHandler from './index.js'
	import {
		Platform,
		Storage_Key,
		CarSetting,
		timeslot
	} from "@/static/config.js"
	import {
		shareMixins
	} from '@/mixins/share'
	import VideoPlayer from './components/video-player.vue'
	// import Voice from '@/common/QS-baiduyy.js';
	export default {
		components: {
			IndexPart5,
			BookingCarType,
			VideoPlayer
		},
		mixins: [shareMixins],
		data() {
			return {
				shareData: {
					title: Platform.name,
					path: '/pages/index/index'
				},
				newNotice: '车辆入场通知',
				// 提示信息弹窗
				msgType: 'success',
				messageText: '这是一条成功提示',
				type: 'center',
				icons: [{
						text: '课程',
						icon: '/static/img/ico1.png',
						key: 'course'
					},
					// {
					// 	text: '考试',
					// 	icon: '/static/img/ico2.png',
					// 	key: 'exam'
					// },
					{
						text: '通知',
						icon: '/static/img/ico3.png',
						key: 'notice'
					},
					{
						text: '师资团队',
						icon: '/static/img/ico4.png',
						key: 'certificate'
					}
				],
				courses: [
					// 静态数据，后续用接口替换
					{
						title: '健康管理师',
						desc: '健康管理师课程旨在培...',
						img: '/static/courses/health.png'
					},
					{
						title: 'OH卡牌疗愈课程',
						desc: 'OH卡疗愈师课程教授潜...',
						img: '/static/courses/ohcard.png'
					},
					{
						title: '生命认知觉醒课程',
						desc: '生命觉醒课程通过探索...',
						img: '/static/courses/life.png'
					},
					{
						title: '香道疗愈师课程',
						desc: '香道疗愈师课程教授传...',
						img: '/static/courses/aroma.png'
					},
					{
						title: '灵气疗愈课程',
						desc: '灵气疗愈师课程教授能...',
						img: '/static/courses/reiki.png'
					},
					{
						title: '曼陀罗疗愈课程',
						desc: '曼陀罗疗愈课程是以曼...',
						img: '/static/courses/mandala.png'
					}
				],
				tabbar: [{
						text: '首页',
						icon: '/static/tabbar/home.png',
						key: 'home'
					},
					{
						text: '课程',
						icon: '/static/tabbar/course.png',
						key: 'course'
					},
					{
						text: '考试',
						icon: '/static/tabbar/exam.png',
						key: 'exam'
					},
					{
						text: '我的',
						icon: '/static/tabbar/user.png',
						key: 'user'
					}
				],
				currentTab: 'home',
				showVideo: false,
				videoUrl: '',
				currentCourse: {},
			}
		},
		onLoad() {
			this.setListening(); // 设置监听
			indexHandler.checkUserInfo(); // 检查用户信息
			this.fetchCourses(); // 预留：页面加载时获取课程数据
		},
		methods: {
			// 设置监听
			setListening() {
				let _self = this;
				uni.$on('carIn', function(data) {
					if (data.key) {
						_self.newNotice = data.msg;
						_self.messageToggle('success', data.msg);

					} else {
						_self.messageToggle('error', data.msg);
					}
				})
				uni.$on('newsNotice', function(data) {
					_self.messageToggle(data.key ? 'success' : 'error', data.msg);
				})
				// 此处也需要加监听exitUser
				uni.$on('exitUser', function(data) {
					if (data.key) {
						indexHandler.doExit();
						_self.messageToggle('error', '用户信息发生变化，请重新登录平台！');
					}
				})
			},

			showPopup() {
				this.$refs.bookingtypeDialog.open()
			},
			closeBookingtypeDialog() {
				this.$refs.bookingtypeDialog.close();
			},
			messageToggle(type, msg) {
				this.msgType = type;
				this.messageText = msg;
				this.$refs.message.open();
			},
			// 预留：调用后台接口获取课程数据
			fetchCourses() {
				let _selt = this;
				request({
					url: Platform.api_requestUrl + '/treatment/kecheng/list',
					data: {
						pageNum: 1,
						pageSize: 10
					},
					method: 'GET',
				}).then(response => {
					if (response.code == 200) {
						this.courses = response.rows;
						this.courses.forEach(el => {
							el.fengmianlujing = Platform.api_requestUrl + '/' + el.fengmianlujing;
						})
					} else {}
				}).catch(error => {});
			},
			onIconClick(item) {
				// 处理四个按钮点击
				// 可根据 item.key 跳转或弹窗
				// uni.navigateTo({ url: ... })
				if(item.key=='course'){
					uni.switchTab({ url: '/pages/booking/booking-car-list' })
				} else if(item.key=='notice'){
					uni.navigateTo({ url: '/pages/notice/notice' })
				} else if (item.key == 'certificate') {
					uni.switchTab({ url: '/pages/record/record' })
				}
			},
			onTabClick(tab) {
				this.currentTab = tab.key;
				// 处理底部tab切换
				// uni.switchTab({ url: ... })
			},
			handleCourseClick(course) {
				let token = uni.getStorageSync('token');
				let permit = this.$storage.get('courseList').indexOf(course.kcId)>-1;
				if(!token){
					this.messageToggle('error', '请登录后查看!')
					return;
				} else if(!permit){
					this.messageToggle('error', '暂无视频权限!')
					return;
				}
				uni.navigateTo({
					url: `/pages/video/video-player?id=${course.kcId}`
				});
			},
			fetchVideoUrl(courseId) {
				// 这里替换为实际的API调用
				request({
					url: Platform.api_requestUrl + '/treatment/kecheng/' + courseId,
					method: 'GET',
				}).then(response => {
					if (response.code == 200) {
						if(response.data.treatmentKechengZhangjieList?.length<1){
							this.messageToggle('error', '暂无视频权限,请联系管理员申请!');
							return;
						}
						let temp = response.data.treatmentKechengZhangjieList?.map(item => {
							item.url = Platform.api_requestUrl + '/common/getVideoUrl?videoPath='+item.shipinlujing
							return item
						});
						this.videoUrl = temp[0].url;
						this.showVideo = true;
						this.$refs.videoPopup.open();
					} else {
						this.messageToggle('error', '获取视频失败');
					}
				}).catch(error => {
					this.messageToggle('error', '获取视频失败');
				});
			},
			closeVideoPopup() {
				this.showVideo = false;
				this.videoUrl = '';
				this.$refs.videoPopup.close();
			}
		}
	}
</script>

<style scoped>
	.main-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 60px;
		max-width: 1200px;
		margin: 0 auto;
	}

	.banner {
		background: #ff6600;
		color: #fff;
		text-align: center;
		font-size: 18px;
		padding: 16px 0;
		font-weight: bold;
	}

	.icon-row {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 24px 0 12px 0;
		padding: 0 20px;
	}

	.icon-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-img {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: #f0f0f0;
		margin-bottom: 6px;
	}

	.icon-text {
		font-size: 14px;
		color: #333;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #222;
		margin: 12px 0 8px 16px;
		border-left: 4px solid #2196f3;
		padding-left: 8px;
	}

	.course-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 16px;
		gap: 16px;
	}

	.course-card {
		width: calc(50% - 8px);
		background: #fff;
		border-radius: 8px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.course-img {
		width: 100%;
		height: 90px;
		object-fit: cover;
	}

	.course-info {
		padding: 8px 10px 10px 10px;
	}

	.course-title {
		font-size: 15px;
		font-weight: 600;
		color: #222;
	}

	.course-desc {
		font-size: 12px;
		color: #888;
		margin-top: 2px;
		overflow: hidden;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #888383;
	}

	.tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 56px;
		background: #fff;
		display: flex;
		border-top: 1px solid #eee;
		z-index: 100;
		max-width: 1200px;
		margin: 0 auto;
	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tabbar-icon {
		width: 26px;
		height: 26px;
	}

	.tabbar-text {
		font-size: 12px;
		color: #888;
		margin-top: 2px;
	}

	.tabbar-text.active {
		color: #2196f3;
		font-weight: bold;
	}

	.video-popup {
		width: 90vw;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.video-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: #f5f5f5;
	}

	.video-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		font-size: 40rpx;
		color: #666;
		padding: 0 20rpx;
	}

	/* 平板适配样式 */
	@media screen and (min-width: 768px) {
		.banner {
			font-size: 24px;
			padding: 24px 0;
		}

		.icon-row {
			margin: 32px 0 24px 0;
		}

		.icon-img {
			width: 80px;
			height: 80px;
		}

		.icon-text {
			font-size: 16px;
			margin-top: 8px;
		}

		.section-title {
			font-size: 20px;
			margin: 24px 0 16px 24px;
		}

		.course-list {
			padding: 0 24px;
			gap: 24px;
		}

		.course-card {
			width: calc(33.33% - 16px);
		}

		.course-img {
			height: 160px;
		}

		.course-info {
			padding: 16px;
		}

		.course-title {
			font-size: 18px;
		}

		.course-desc {
			font-size: 14px;
			margin-top: 8px;
		}

		.tabbar {
			height: 70px;
		}

		.tabbar-icon {
			width: 32px;
			height: 32px;
		}

		.tabbar-text {
			font-size: 14px;
			margin-top: 4px;
		}

		.video-popup {
			width: 80vw;
			max-width: 1000px;
		}

		.video-title {
			font-size: 36rpx;
		}
	}
</style>